<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>

<html>
	<head>
	<%@ include file="/WEB-INF/views/include/common.jsp" %>
<meta name="AUTHOR" content="QroTech Inc." />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
		<meta http-equiv="PRAGMA" content="NO-CACHE"/>
		<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>큐로넷::위치관제서비스</title>
		
		
		<link rel="stylesheet" href="${cssUrl }/header.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/map_menu.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/map_table.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/map_sms.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/map_carlook.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/map_popup_m_120.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/style.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<link rel="stylesheet" href="${cssUrl }/m-120.css" type="text/css" />
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
		<script src="${jsUrl }/m-120.js" type="text/javascript"></script>
		<script src="${jsUrl }/iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script>
		

<style>
.highlighter{
background-color:#FFFFCC
}
</style>

</head>
	

<body>
	<div class="headerContent upIndex5" style="position:relative;">
	
		<div class="pageHeader">
			<%@ include file="/WEB-INF/views/include/logoLink.jsp" %>
			<div id="pageNav">
				<ul>
					<%@ include file="/WEB-INF/views/include/mainNavi.jsp" %>
				</ul>
			</div>
			<div id="pageNavRight">
				<%@ include file="/WEB-INF/views/include/titleLink.jsp" %>
			</div>
			
			
		</div>
		<div class="header_line"></div>
	</div><!--header end-->	
	<div class="topInfo upIndex5"  style="position:relative;height:30px;background-color:white;">
		
		<div class="titleList" height="30px"><span width="109px" >차량 상세 지도보기</span></div>
		<div class="loading">	
			<ul>
				<li class="arrow_anim loadingToggle_play"><img src="${imgUrl}/Arrow_Anim.gif"/></li>
				<li class="arrow_anim loadingToggle_stop" style="display:none"><img src="${imgUrl}/loading.png"/></li>
				<li class="arrow_anim"><label for="css_sized_container" title="1분마다 최신 정보로 자동 갱신합니다.">위치추적</label></li>
				<li id="autoUpdate" class="auto_update">
					<div class="css_sized_container" title="4분마다 최신 정보로 자동 갱신합니다.">
						<input type="checkbox" id="css_sized_container" class="tracker" checked/>
					</div>
				</li>
				
			</ul>
		</div>
		
		
		<div class="save_screen">
			<a onclick="javascript:printScript();" style="font-weight:900;"><img src="${imgUrl}/buttonIcon_save.png"/>&nbsp;지도화면 인쇄</a>
		</div>
	</div>
	<div id="map" class="map" >
		<%@ include file="/WEB-INF/views/daumMap/daumMap.jsp" %>
		<div id="expandIcon_top" class=" upIndex5">
			<img src="${imgUrl }/wideIcon.png"/>
		</div>
	</div><!--map end -->	
	<div class="button_bottom upIndex4" id="expandIcon_bottom"><img id="buttonRotation_bottom" src="${imgUrl }/on3.png" style="margin-top:6px;"/></div>
		
	<div class="slidebottom ui-resizable-handles upIndex4">
	
		<div id="slidebottomcontent">
			<div class="secondMenu">
					<div id="searchInfo" class="searchInfo">
						<ul >
							<li id="carRegiNumber" class="info1"></li>
							<li id="name" class="info2"></li>
							<li id="dep_DeptName" class="info3"></li>
							<li id="dayDistanceStr" class="letterRed2"></li>
							<li class="search_period">조회일: <input type="text" id="datepicker"/></li>
							<li class="second_menu_selection">조회간격: 
								<select id="getPeriod" class="select" label="조회간격">
									<option value="10">10초</option>
									<option value="30">30초</option>
									<option value="60">1분</option>
									<option value="120" selected="selected">2분</option>
									<option value="240">4분</option>
									<option value="600">10분</option>
									<option value="1800">30분</option>
									
								</select>
							</li>
							
<!-- 							<li id="button_search" class="button_search"><a style="font-weight:900;">검색</a></li> -->
<!-- 							<li class="button_graph"><a href="#" style="font-weight:900;">그래프보기</a></li> -->
<!-- 							<li class="button_excel"><a href="#" style="font-weight:900;">엑셀저장</a></li> -->
						</ul>
					</div>
					
					<div class="button_graph"><a href="#" style="font-weight:900;"><img src="${imgUrl }/buttonIcon_graph.png"/>&nbsp;그래프보기</a></div>
					<div class="button_excel"><a style="font-weight:900;" onclick="javascript:makeExcelData();"><img src="${imgUrl }/buttonIcon_excel.png"/>&nbsp;엑셀저장</a></div>
					
				</div> <!-- secondMenu end -->
				
						
					
				<div class="map_chart_scroll">
				<div class="map_chart">
					<div class="chart_head">
						<table  valign="top" cellpadding="0" cellspacing="0" > 
					
						<tr>
							<th width="40px">번호</th>
							<th width="40px">시동</th>
							<th width="95px">수신시각</th>
							<th width="170px">위치</th>
							<th width="50px">속도</th>
							<th width="50px">RPM</th>
							<th width="50px">방향</th>
							<th width="50px">제동</th>
							<th width="65px">거리</th>
							<th width="65px">누적거리</th>
							<th width="45px">CDMA</th>
							<th width="40px">GPS</th>
							<th width="40px">전압</th>
							<th width="40px">온도</th>
							<th width="40px">습도</th>
							<th width="*">이벤트메세지</th>
						</tr>	
					</table>
				</div><!--chart_head end-->
				<div class="chart_body">
					<table id="pagingTbl" valign="top" cellpadding="0" cellspacing="0">
						<tbody> 
						<tr onclick="makeMarkerFocus(this)">
							<td id="seq" width="40px"></td>
							<td id="startUp" width="40px"></td>
							<td id="detectTime" width="95px"></td>
							<td id="address" width="170px" style="white-space:normal"></td>
							<td id="speed" width="50px"></td>
							<td id="rpm" width="50px"></td>
							<td id="cardinalStr" width="50px"></td>
							<td id="breaked" width="50px"></td>
							<td id="dayDistance" width="65px"></td>
							<td id="totalDistance" width="65px"></td>
							<td id="cdmastate" width="45px"></td>
							<td id="gpsstate" width="40px"></td>
							<td id="voltage" width="40px"></td>
							<td id="temperature" width="40px"></td>
							<td id="humidity" width="40px"></td>
							<td width="*"></td>
							<td style="display:none">
								<input type="hidden" id="lat" name="lat"/>
								<input type="hidden" id="lng" name="lng"/>
								<input type="hidden" id="cardinal" name="cardinal"/>
								<input type="hidden" id="name" name="name"/>
								<input type="hidden" id="detectTimeOri" name="detectTimeOri"/>
								<input type="hidden" id="run" name="run"/>
								<input type="hidden" id="checkAreaCode" name=""/>
							</td>
						</tr>
						</tbody>						
						
					</table>	
				</div><!-- firstChart is the scroll table end -->
			</div><!-- whole chart end-->
		</div><!--scroll for whole chart end-->
			<div id="pagenation">
				<span class="current_page">1</span><img src="${imgUrl }/page_num_border.png"/>
				<span>2</span><img src="${imgUrl }/page_num_border.png"/>
				<span>3</span><img src="${imgUrl }/page_num_border.png"/>
				<span>4</span><img src="${imgUrl }/page_num_border.png"/>
				<span>5</span><img src="${imgUrl }/page_num_border.png"/>
				<span>6</span><img src="${imgUrl }/page_num_border.png"/>
			</div>
			
		</div><!--slidebottomcontent-->
	</div><!--slidebottom end -->
	<div class="slide_left upIndex4">
		
		
			<table id="wholetable" cellpadding="0" cellspacing="0">
				<tr>
					<td class="panel_left">
						<div class="panel_left_content">
							<div id="menu_bg">
								<div id="menu" >
									<ul>
										<li class="menu1"><a class="toggler" id="menu1">현재정보</a></li>
										<li class="menu2"><a class="toggler" id="menu2">목 적 지</a></li>
										<li class="menu3"><a class="toggler" id="menu3">제어명령</a></li>
										<li class="menu5"><a onclick="javscript:openQuestionPopup('http://www.qronet.co.kr/help/qronet_help.html#DetailMap')" class="toggler" id="menu5"><img src="${imgUrl }/question_mark.png"/></a></li>
										
									</ul>
								</div><!--menu end -->
							</div><!--menu_bg-->
							<div class="menuContent">
					<div class="map2-1_table_height" id="menu1-info">
						<div class="map_table">
							<input type="hidden" id="carCode" name="carCode"/>
							<table class="content1" cellpadding="0" cellspacing="0">
								<tr >
									<th class="table_title_color">차량번호</th>
									<td id="carRegiNumber"></td>
								</tr>
								<tr>
									<th class="table_title_color">수신시각</th>
									<td id="detectTime"></td>
								</tr>
								<tr>
									<th class="table_title_color">현재위치</th>
									<td id="address"></td>
								</tr>
							</table>
						</div>
						
						<div class="map_table">
							<table class="content1"   cellpadding="0" cellspacing="0">
								<tr >
									<th class="table_title_color">운전자명</th>
									<td id="name"></td>
									<td colspan="2"><img id="barwithtext"src="${imgUrl }/orange_bar.png"/><span id="dep_DeptName"></span></td>
								</tr>
								<tr>
									<th class="table_title_color">연락처</th>
									<td colspan="3" id="dri_HandPhone"></td>
								</tr>
								<tr>
									<th class="table_title_color" >차종</th>
									<td id="typ_CarTypeName"></td>
									<th class="table_title_color">운반물내용</th>
									<td id="bag_BaggageName"></td>
								</tr>
							</table>
						</div>
						
					</div><!--현재정보 end-->

						<div class="map2-1_table_height" id="menu2-info">
							<div class="map_table">
								<table class="content1" cellpadding="0" cellspacing="0">
								<tr >
									<th class="table_title_color">차량번호</th>
									<td id="carRegiNumber">경기 51가 1234</td>
								</tr>
								<tr>
									<th class="table_title_color">수신시각</th>
									<td id="detectTime">2013-04-04 오전 10:27:58</td>
								</tr>
								<tr>
									<th class="table_title_color">현재위치</th>
									<td id="address">경기도 부천시 원마구 햑대동 192</td>
								</tr>
							</table>
						</div>
						
					
					
						<div class="tableTitleA">
						<a href="javascript:regiDestinationPopup();"  style="font-weight:900;">
						<img src="${imgUrl }/buttonIcon_mappoint.png" style="vertical-align:middle;"/>&nbsp;목적지관리</a></div>
							<div class="map_table" style="padding-top:0px;">
								<table id="destiniTbl" class="content1"   cellpadding="0" cellspacing="0">
									<thead>
										<tr >
											<th class="table_title_color" style="width:40px;">예정시각</th>
											<th class="table_title_color" style="width:55px;">목적지명</th>
											<th class="table_title_color" style="width:*;">위치</th>
											<th class="table_title_color" style="width:40px;">통과시각</th>
										</tr>
									</thead>
									<tbody>
										<tr onclick="gotoDestini(this)">
											<td id="arriDate"></td>
											<td id="name"></td>
											<td id="address"></td>
											<td id="passed"></td>
											<td style="display:none;">
												<input type="hidden" id="lat"/>
												<input type="hidden" id="lng"/>
											</td>
										</tr>
									</tbody>
						</table>
						</div>
					</div><!--목적지 end-->
			
					<div class="map2-1_table_height" id="menu3-info">
						<div class="map_table">
							<table class="content1" cellpadding="0" cellspacing="0">
							<tr >
								<th class="table_title_color">차량번호</th>
								<td id="carRegiNumber">경기 51가 1234</td>
							</tr>
							<tr>
								<th class="table_title_color">수신시각</th>
								<td id="detectTime">2013-04-04 오전 10:27:58</td>
							</tr>
							<tr>
								<th class="table_title_color">현재위치</th>
								<td id="address">경기도 부천시 원마구 햑대동 192</td>
							</tr>
						</table>
						</div>
						
						<div class="map_table">
							<table class="content1"   cellpadding="0" cellspacing="0">
								<tr >
									<th class="table_title_color">시동제어</th>
									
											<td>
												<div class="css_sized_container" style="margin-left:15px;">
													<input type="checkbox" id="css_sized_container" checked/>
												</div>
      											
       													 
      												
    											
											</td>
								</tr>
								
							</table>
						</div>
							</div>	<!--제어명령 end   -->
						</div><!--MenuContent End-->
						

					<div id="sms">
						<div class="mail"><img src="${imgUrl}/mail.png"/>SMS 전송</div>
						<div class="message">
							<textarea name="message" id="message" rows="4" cols="35" readonly="readonly">Hello!</textarea>
						</div>
						<div class="trans">
							<form method="post" action="">
								<ul>
									<li class="plus"><img  width="18px" height="18px" src="${imgUrl}/plus.png"/></li>
									<li class="input_field"><textarea class="texting" id="send_msg" name="send_msg" cols="20" rows="1" style="max-width:233px;"></textarea></li>
									<li class="button_image"><input  class="submit" type="button" value="전송" id="sendsms"/></li>
								</ul>
							</form>
						</div>
					</div>
					
						
					<div class="carlook">
						<div class="car_look_title_line">
						
							<div class="titleList" height="30px" style="padding:5px 4px 7px 4px;" title="전체차량 지도 보기로 이동"><span width="100px" style="font-size:.9em;"  onclick="javascript:gotoM110()">전체차량보기</span></div>
							<div class="carlook_time">갱신시각: <span id="nowDate"></span></div>
							<div class="carlook_button" height="30px">
								<img id="reload" class="auto_update" src="${imgUrl}/auto_update.png" title="새로고침"/>
								<img class="up_button" src="${imgUrl}/up.png" title="확대하여 보기"/>
							</div>
						</div>
						<div class="carlook_scrollWidth">
							<div class="carlook_box">
								<div class="carlook_head">
									<table cellpadding="0" cellspacing="0">
									
										<tr >
											<th width="30px">번호</th>
											<th width="85px">차량번호</th>
											<th width="55px">운전자명</th>
											<th width="*" class="carlook_lastTh_space">현재위치</th>
										</tr>
								</table>
							</div>
							<div class="carlook_body">
								<table cellpadding="0" cellspacing="0">
									<c:forEach items="${carList }" var="car" varStatus="status">
										<tr onclick="chooseCar(this, true)">
											<td width="30px" class=""  ><c:out value="${status.count}"/></td>
											<td width="85px" class="" ><c:out value="${car.carRegiNumber}"/></td>
											<td width="55px" class="" ><c:out value="${car.name}"/></td>
											<td width="*" class="carlook_lastTd_space" ><c:out value="${car.address}"/></td>
											<td style="display:hidden">
												<input type="hidden" id="carType" value="<c:out value="${car.carType}"/>"/>
												<input type="hidden" id="count" value="<c:out value="${status.count}"/>"/>
												<input type="hidden" id="carCode" value="<c:out value="${car.carCode}"/>"/>
											</td>
										</tr>
									</c:forEach>
								</table>
								</div><!--carlook_body end-->
							</div><!--carlook_box end-->
						</div><!--carlook_scrolWidth end-->
							
					</div><!-- carlook end-->
						</div><!--panel_left_content(white)-->
						
					</td><!--td_ panel_left-->
					<td id="expandIcon_left" ><div class="button_left"><img id="buttonRotation" src="${imgUrl }/get_in.png"/></div></td>
				</tr><!-- expandIcon_left and panel_left-->
			</table><!-- panel left table end-->
			
		</div><!-- slide end-->
		<div id="carInfoWapper">
			<div id="carInfoPopup" class="popup upIndex3" style="display:none;">
				<div class="popup_content " >
					<div class="popup_top">
						<div class="popup_plate">
							<span>차량번호 :<span id="carRegiNumber"></span> </span>
							<span>수신시각:<span id="detectTime"></span></span>
						</div>
						<div class="popup_close" onclick="javascript:hideM120CarInfo();"><img src="${imgUrl }/popup_close.png"/></div>
					</div>	
					<div class="popup_images">
						<ul>
							<li class="icon"><img id="carTypeImg" src="${imgUrl }/icon_cartype_00.png" height="45px" width="45px" title="차량종류"/></li>
							<li class="icon"><img id="startUp" src="${imgUrl }/icon_keyon.png" height="45px" width="45px" title="차량 시동 상태"/></li>
							<li class="icon"><img id="checkAreaCode" src="${imgUrl }/icon_areain.png" height="45px" width="45px" title="관심지역 진입여부"/></li>
							<li class="icon"><img id="run" src="${imgUrl }/icon_driving.png" height="45px" width="45px" title="주행상태"/></li>
						</ul>
					</div><!-- popup images end-->
					<div class="popup_table_box" style="width:100%; height:100%;overflow:hidden;">
						<div class="popup_table" style="">
							<table class="popup_content" cellpadding="0" cellspacing="0" >
								<tr >
									<td class="popup_head" >위치</td>
									<td id="address" class="popup_body" colspan="3" >경기도 성남시 분당구</td>
								</tr>
								<tr>
									<td class="popup_head">차량속도</td>
									<td id="speed" class="popup_body">100Km/h</td>
									<td class="popup_head">1일 이동거리</td>
									<td id="dayDistance" class="popup_body">23</td>
								</tr>
							</table>
						</div><!--popup table1 end-->
					</div><!--popup table box end-->
				</div><!--popup content end-->
			</div><!--popup end-->
		</div>
	   


		
	<form id="theForm" name="theForm" action="" method="post" >
		<input type="hidden" name="carCode" id="carCode"/>
		<input type="hidden" name="addressComponent1" id="addressComponent1"/>
		<input type="hidden" name="addressComponent2" id="addressComponent2"/>
		<input type="hidden" name="deptCode" id="deptCode"/>
		<input type="hidden" name="carType" id="carType" />
		<input type="hidden" name="baggage" id="baggage"/>
		<input type="hidden" name="dev_CarDeviceCode" id="dev_CarDeviceCode"/>
		<input type="hidden" name="searchType" id="searchType"/>
		<input type="hidden" name="searchName" id="searchName" />
		<input type="hidden" id="customerCode" name="customerCode"/>
	</form>
<script type="text/javascript">
  
  
	var intervalTime = 1*60*1000;	//1 분
// 	var intervalTime = 4*1000;	//4 초
	var interval=self.setInterval(function(){windowReload();},intervalTime);	
  
	var _this = this;
	var rootInfowindow=1;
	
	var newStart = true;
	
	
	function carRootReload(){
		
		$('#nowDate').text(formatter.dateFormatYYYYMMDDHHMMSS2(new Date()));
		getMapLine('center');
		drawLine();	// 위치 추적 on;
		makePagingOnMap();
		drawMarkerM120();
	}
	
	function init(){

		$('#nowDate').text(formatter.dateFormatYYYYMMDDHHMMSS2(new Date()));
		
		
		
		
		if(newStart){
			
			_this.carPosition={};
			_this.carPosition['carcode']='<c:out value="${car.carCode}"/>';
			_this.carPosition['lat']='<c:out value="${car.lat}"/>';
			_this.carPosition['lng']='<c:out value="${car.lng}"/>';
//	 		jsonLog(_this.carPosition);
			
			
			var mapSetting = {};	
			mapSetting['lat']='<c:out value="${mapSetting.lat}"/>';
			mapSetting['lng']='<c:out value="${mapSetting.lng}"/>';
			
			mapSetting['swLat']='<c:out value="${mapSetting.swLat}"/>';
			mapSetting['swLng']='<c:out value="${mapSetting.swLng}"/>';
			mapSetting['neLat']='<c:out value="${mapSetting.neLat}"/>';
			mapSetting['neLng']='<c:out value="${mapSetting.neLng}"/>';
			
			markerSetting.mapSetting = mapSetting;
			
			
			var param = {};
			param['addressComponent1']='<c:out value="${param.addressComponent1}"/>';
			param['addressComponent2']='<c:out value="${param.addressComponent2}"/>';
			param['deptCode']='<c:out value="${param.deptCode}"/>';
			param['carTypeCode']='<c:out value="${param.carTypeCode}"/>';
			param['carCode']='<c:out value="${param.carCode}"/>';
			param['baggage']='<c:out value="${param.baggage}"/>';
			param['dev_CarDeviceCode']='<c:out value="${param.dev_CarDeviceCode}"/>';
			param['searchType']='<c:out value="${param.searchType}"/>';
			param['searchName']='<c:out value="${param.searchName}"/>';
			param['customerCode']='<c:out value="${param.customerCode}"/>';
			
			autoSync('theForm', param);
			
			_this.pagingTbl = tableSync('pagingTbl');
			
			mapInit_m120(_this.carPosition);
			initTableSync();
			initBinding();
			newStart = false;
		}
		
		
		$('.upIndex5').css('z-index',5);
		$('.upIndex4').css('z-index',4);
		$('.upIndex3').css('z-index',3);
		
		
		
		
		
		
		settingCarNewInfo(_this.carPosition['carcode']);
		
		
		
		
		
// 		var paging={};
// 		paging['']='<c:out value="${totalPage.totalPage}"/>';
// 		paging['page']=
		
		markerSetting.paging.page = '<c:out value="${totalPage.page}"/>';
		markerSetting.paging.totalPage ='<c:out value="${totalPage.totalPage}"/>';
		markerSetting.paging.nowSeq = 1;
		
		makePagingOnMap();
		logs('makeMarkerOnMap init() 1');
		drawMarkerM120();
		_nowState = 'm120';
		
		
		/**
		* 관심지역	
		*/
		var checkAreaList=[];
		var checkArea={};
		<c:forEach items="${checkAreaList }" var="check" varStatus="status">
		checkArea={};
		checkArea.lat='<c:out value="${check.lat}"/>';
		checkArea.lng='<c:out value="${check.lng}"/>';
		checkArea.radius='<c:out value="${check.radius}"/>';	
		checkArea.name='<c:out value="${check.name}"/>';
		checkArea.address='<c:out value="${check.address}"/>';
		checkAreaList.push(checkArea);
		</c:forEach>
		/*
		* 관심지역 그리기.
		*/
		makeCheckArea(checkAreaList);
		drawLine();	//처음 들어 왔을 때.
	}
	$(document).ready(function() {
		
		init();
		
		
	 });	

	_this.count=0;

	var markerSetting = {
		paging:{},
		period:2,
		zoom:4
	}
	
	function hideCarInfoPopup(){
		hideM120CarInfo();
		
		removeCarDetailDialogM120();
	}
	
	function initTableSync(){
		_this.destiniTbl = tableSync('destiniTbl');
	}
	
	function initBinding(){
		$('.popup_close').unbind('click');
		$('.popup_close').bind('click', function(){
			hideCarInfoPopup();
			
		});
		
		$('#getPeriod').unbind('change');
		$('#getPeriod').bind('change', function(){
			changePeriod($(this).val());
			searchNow();
		});
		
// 		$('#button_search').unbind('click');
// 		$('#button_search').bind('click', function(){
			
						
			
// 		});
		$('#reload').unbind('click');
		$('#reload').bind('click', function(){
			windowReload();
			
		})
		
		$('#datepicker').bind('change', function(){
			changeDate($(this).val());
			searchNow();
		});
		
		$('#autoUpdate').bind('click', function(){
			if($('input[id=css_sized_container]').prop('checked')){
				startOnTracker();	
			}else{
				startOffTracker();	
			}
		});
		
		
		
		
		setDatePicker();
		changeUpdateLogic();
		
		
		$('#send_msg').unbind('keyup');
		$('#send_msg').bind('keyup', function(){
			checkLength($(this));	//글자수 제한
		});
		
		$('#sendsms').unbind('click');
		$('#sendsms').bind('click', function(){
			sendingSms();
		});
	}
	
	function checkLength(obj){
		var msg = obj.val();
		var length = fc_chk_byte(obj);
		if(length>255){
			alert('최대 255 글자를 초과하실 수 업습니다.');
			obj.val(msg.substring(0, msg.length-1));	
		}
	}
	
	function sendingSms(){
		var rec = $('#dri_HandPhone').text();
		var regExp = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/;
		if(!regExp.test(rec)){
			alert(rec+'는 잘못된 전화번호 입니다. 연락처를 확인해주세요.');
			return;
		}
		var msg = $('#send_msg').val().trim();
		if(msg.length==0){
			alert('메시지 내용이 없습니다.\n문자 메시지를 전송하지 않습니다.');
			return;
		}
		
 		var url='/map/sendingSms.json';
 		var param={};
 		param['msg']=msg;
 		param['rec']=rec;
 		param['carCode']=$('#menu1-info #carCode').val();
 		AjaxPost(url, param, function(data){
 			if(data.code=='success'){
				var message = $('#message').val();
				$('#message').val(message+'\n['+formatter.dateFormatYYYYMMDDHHMMSS2(new Date())+"]"+msg);
				$('#send_msg').val('');
 			}
			alert(data.result);
 		});
	}
	
	/*
	' ------------------------------------------------------------------
	' Function    : fc_chk_byte(aro_name)
	' Description : 입력한 글자수를 체크
	' Argument    : Object Name(글자수를 제한할 컨트롤)
	' Return      : 
	' ------------------------------------------------------------------
	*/
	function fc_chk_byte(obj)
	{

	   var ls_str     = obj.val(); // 이벤트가 일어난 컨트롤의 value 값
	   var li_str_len = ls_str.length;  // 전체길이

	   // 변수초기화
	   var i           = 0;  // for문에 사용
	   var li_byte     = 0;  // 한글일경우는 2 그밗에는 1을 더함
	   var ls_one_char = ""; // 한글자씩 검사한다

	   for(i=0; i< li_str_len; i++)
	   {
	      // 한글자추출
	      ls_one_char = ls_str.charAt(i);

	      // 한글이면 2를 더한다.
	      if (escape(ls_one_char).length > 4)
	      {
	         li_byte += 2;
	      }
	      // 그밗의 경우는 1을 더한다.
	      else
	      {
	         li_byte++;
	      }

	         li_len = i + 1;
	   }
		return li_byte;	   
	}
	
	function startOffTracker(){
		$('.loadingToggle_play').hide();
		$('.loadingToggle_stop').show();
		window.clearInterval(interval);
		setDatePicker();
		$( "#datepicker" ).attr('readonly', false);
		$( "#datepicker" ).blur();
		$('li .search_period').blur();
	}
	
	// 자동 추적.
	function startOnTracker(){
		interval=self.setInterval(function(){windowReload();},intervalTime);//4분
		$('.loadingToggle_play').show();
		$('.loadingToggle_stop').hide();
		removeDatePicker();
		$( "#datepicker" ).attr('readonly', true);
		$('#datepicker').val(formatter.dateFormatYYYYMMDD(new Date()));
		windowReload();
	}
	
	function changeUpdateLogic(){
		$('input.tracker').attr('checked', false);
		logs($('input.tracker'));
		$('.loadingToggle_play').hide();
		$('.loadingToggle_stop').show();
		window.clearInterval(interval);
		
	  	$('.css_sized_container :checkbox').iphoneStyle({ resizeContainer: false, resizeHandle: false
      	 });
	}

	function setDatePicker(){
		$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }).datepicker("setDate", "0");
	}
	
	function removeDatePicker(){
		$( "#datepicker" ).attr('readonly', true);
		$( "#datepicker" ).datepicker( "destroy" );
	}
	
	function windowReload(){
		carRootReload();
		
	}
	
	
	
	function searchNow(){

		changePaging(0, 'before');
		
		clearMarkers();
		clearLines();
		drawLine();
		if(_daumMap.noData){
			
			_daumMap.getNewData = true;
			getMapLine('center');
			logs('makeMarkerOnMap searchNow() 1');
			makePagingOnMap();
			drawMarkerM120();
			return;
		}
		markerSetting.paging.page=1;
		markerSetting.paging.start=0;
		markerSetting.paging.end=0;
		makePagingOnMap();
		drawMarkerM120();
		logs('makeMarkerOnMap searchNow() 2');

	}
	
	function setCarInfoPopup(data){
		logs('setCarInfoPopup'+isNaN(data.checkAreaCode));
		jsonLog(data);
		try{
			var syncData = {};
			syncData.address = data.address;
			syncData.speed = data.speed +"Km/h";
			syncData.dayDistance =data.dayDistance/10 +"Km";
			syncData.detectTime = formatter.dateFormatYYYYMMDDHHMMSS2(data.detectTime);	
			syncData.carRegiNumber =$('#menu1-info #carRegiNumber').text();
			syncData.startUp = data.startUp=='y'?"${imgUrl }/icon_keyon.png":"${imgUrl }/icon_keyoff.png";
			syncData.checkAreaCode = Number(data.checkAreaCode)?"${imgUrl }/icon_areain.png":"${imgUrl }/icon_areaout.png";
			syncData.run = data.run=='y'?"${imgUrl }/icon_driving.png":"${imgUrl }/icon_parking.png";
			autoSync('carInfoPopup', syncData);	
		}catch(e){
			logs('899');
			logs(e);
		}
		$('#carInfoPopup').show();
	}

	//차량 변경
	function chooseCar(tr, flag){
		var carCode = $(tr).find('#carCode').val();
		if(carCode.length==0) return;
		var count = $(tr).find('#count').val();
		
		clearMarkers();
		try{
			logs('typeof rootInfowindow = '+typeof rootInfowindow);
			if(typeof rootInfowindow =='object'){
				rootInfowindow.close();	
			}
			
		}catch(e){};
		
		$('form[name=theForm]').find('#carCode').val(carCode);
		_daumMap.carcode=carCode;
		changeMapLine(carCode);
		_daumMap.noData = true;
		settingCarNewInfo(carCode);
		
		
		
		makePagingOnMap();
		
		
		logs('makeMarkerOnMap chooseCar() 1');
		drawMarkerM120();
	}
	
	var destiniMarker = [];
	
	// 왼쪽 메뉴 세팅
	function settingCarNewInfo(carCode){
		var url='/map/gettingCarNewInfo.json';
		var param={};
		param['carCode']=carCode;
		AjaxPost(url, param, function(data){
			jsonLog(data.car);
			try{
				data.car.detectTime = formatter.dateFormatYYYYMMDDHHMMSS(data.car.detectTime);	
			}	catch(e){}		
			try{
				data.car.carRegiNumber = data.car.carRegiNumber;	
			}	catch(e){}		
			try{
				data.car.dri_HandPhone = formatter.strTelNum(data.car.dri_HandPhone);	
			}	catch(e){}		
			
			if(!data.car.bag_BaggageName){
				data.car.bag_BaggageName='-';
			}
			
			
			$('#carTypeImg').attr('src', '${imgUrl }/icon_cartype_'+data.car.carType+'.png');
			
			autoSync('menu1-info', data.car);
			autoSync('menu2-info', data.car);
			autoSync('menu3-info', data.car);
			var message = '';
			var smsList = data.smsList;
			if(smsList && smsList.length){
				for(var index=0;index<smsList.length;index++){
					message+='['+formatter.dateFormatYYYYMMDDHHMMSS2(smsList[index].date_client_req)+']'+smsList[index].content+'\n';
				}
			}
			$('#message').val(message);
			_this.destiniTbl.tableAutoSync(data.carDestList);
			
			// 목적지 그리기. 원으로 그린다.
			try{
				
				clearMarker(destiniMarker);
				destiniMarker = makeDestiList(data.carDestList);	
			}catch(e){
				
			}
			
			
			$('#searchInfo').find('#carRegiNumber').text(data.car.carRegiNumber);
			$('#searchInfo').find('#name').text(data.car.name);
			$('#searchInfo').find('#dep_DeptName').text(data.car.dep_DeptName);
			
		});
	}
	
	function makingPaging(){
		$('#pagenation').html("");
		var totalPage = markerSetting.paging.totalPage;
		var nowPage = markerSetting.paging.page;
		var html='';
		var className = '';
		var setFunctionName='';
		var index=(nowPage-4);
		var indexCount=0;
		
		
		if(index>1){
			html+='<span style="cursor:pointer;" onclick="changePaging('+index+',\'before\''+')">....</span><img src="${imgUrl }/page_num_border.png"/>';
			
		}
// 		//logs('totalPage/20 = '+totalPage/20);
		for(;index<=(totalPage/20+1);index++){
			if((index)==nowPage){
				className = ' class="current_page"';
				setFunctionName='';
			}else{
				className = 'style="cursor:pointer;"';
				setFunctionName=' onclick="changePaging('+index+')"';
			}
			
			if(index>0){
					
				html+='<span '+className+' '+setFunctionName+'>'+index+'</span><img src="${imgUrl }/page_num_border.png"/>';	
				
				indexCount++;
			}
			if(indexCount>9){
				html+='<span style="cursor:pointer;" onclick="changePaging('+index+',\'after\''+')">'+'....'+'</span>';
				break;
			}
			
		}
		$('#pagenation').html(html);
		try{
			if(markerSetting.paging.makeNewPage > 0){
				var index = markerSetting.paging.makeNewPage;
				markerSetting.paging.makeNewPage=0;
				focusInPaging(index);
			}	
		}catch(e){}
		
	}
	
	function changePaging(index, option){
		logs('markerSetting.paging.totalPage = '+markerSetting.paging.totalPage);
		if(option==null){
			logs(', index = '+index);
			
			markerSetting.paging.page=index;
			markerSetting.paging.start=0;
			markerSetting.paging.end=0;
			makePagingOnMap();
		}else{
			if(option=='before'){
				var next = index-3;
				while(next<=0){
					next++;
				}
				logs('next = '+next+', index = '+index);
				markerSetting.paging.page=next;
				markerSetting.paging.start=0;
				markerSetting.paging.end=0;
				makePagingOnMap();
			}else if(option=='after'){
				var next = index+3;
				while(next>=(markerSetting.paging.totalPage/20)+1){
					next--;
				}
				logs('next = '+next+', index = '+index);
				markerSetting.paging.page=next;
				markerSetting.paging.start=0;
				markerSetting.paging.end=0;
				makePagingOnMap();
			}
		}
	}
	
	function focusInPaging(index){
		jsonLog(markerSetting.paging);
		var page = markerSetting.paging.page;
		if(((page*20) < index) || ((page-1)*20 >= index)){
			
			markerSetting.paging.makeNewPage = index;
			changePaging(Math.ceil(index/20));
			return;

		}
		$('#carInfoPopup').show();
		//logs('focusInPaging - index = '+index);
		var ret = $('#pagingTbl').find('tr td#seq').filter(function(ind){
			if($(this).text()==index)
				return $(this);
// 			$(this).parent().find('td').removeClass('highlighter');
			$(this).parent().find('td').css('background-color', '');
		});
		var tr = $(ret).parent();
		
		$(tr).find('td').css('background-color','#FFFFCC');
		
		var trHeight = $(tr).height();
		//logs('trIndex-1)+trHeight = '+((index-1)%20)*trHeight);
		$('.chart_body').scrollTop(((index-1)%20)*trHeight);
	}
	
	
	function changePeriod(period){
		markerSetting.secPeriod = period;
		markerSetting.paging.period = period;
		markerSetting.date
	}
	
	function changeDate(date){
		markerSetting.paging.date = date;
	}
	
	function setPaging(data){
// 		jsonLog(data);
// 		_this.pagingTbl.tableAutoSync(data.carDestList);
	}
	
	function makeMarkerFocus(tr){
		logs('makeMarkerFocus(tr)');
		logs($(tr));
		hideCarInfoPopup();
		var data = {};
		data.seq = $(tr).find('#seq').text();
		//logs('makeMarkerFocus seq = '+seq);
		data.lat = $(tr).find('#lat').val();
		data.lng = $(tr).find('#lng').val();
		
		data.cardinal = $(tr).find('#cardinal').val();
		data.name = $(tr).find('#name').val();
// 		data.detectTime = $(tr).find('#detectTimeOri').val();
		//logs('data.detectTime = '+data.detectTime);
		var isInBounds = moveMapTo(data.lat, data.lng);
		if(!isInBounds){

			getMapLine('center');
			
		}
		var position = new daum.maps.LatLng(data.lat, data.lng);
		try{
			logs('typeof rootInfowindow = '+typeof rootInfowindow);
			if(typeof rootInfowindow =='object'){
				rootInfowindow.close();	
			}
			
		}catch(e){};
		
		try{
			rootInfowindow = new daum.maps.InfoWindow({
				position : position,
				content: '<span class="infoWindowSpan"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+$(tr).find('#detectTime').text()+'</span>',
				removable : true
			});
			rootInfowindow.setZIndex(2);
			rootInfowindow.open(_daumMap.map);
			
		}catch(e){logs(928);logs(e);}
		

	}
	
	function getDatePickerDate(){
		var value = $('#datepicker').val();
		
		logs(formatter.dateFormatYYYYMMDD(new Date()));
		
		return value; 
	}
	
	function makeExcelData(){
		location.href = "/map/getExcelCarRoot?"+'carCode='+_daumMap.carcode+'&date='+getDatePickerDate()+'&period='+$('#getPeriod').val();

	}
	
	function makePagingOnMap(){
		//logs('makePagingOnMap()');
		
		var url='makeMarkerOnMap.json';
		
		markerSetting.paging.carCode = _daumMap.carcode;
		markerSetting.paging.zoom =  _daumMap.map.getLevel();
		
		markerSetting.paging.date  = getDatePickerDate();
		
		
		var param=markerSetting.paging;
		
		AjaxPost(url, param, function(data){
			
			$.each(data.data,function(index, value){
				value.detectTimeOri = value.detectTime; 
				value.detectTime = formatter.timeFormatHHMMSS2nd(value.detectTime);
				value.startUp = value.startUp=='y'?'On':'Off';
				value.speed = value.speed +'km/h';
				value.dayDistance = formatter.numberComma((value.dayDistance/10)+'') +'km';
				value.totalDistance = formatter.numberComma((value.totalDistance/10)+'') +'km';
				
				value.cdmastate = value.cdmastate==0?'이상':'정상';
				value.gpsstate = value.gpsstate==0?'이상':'정상';
				value.voltage = isNullNaN(value.voltage)?'-':(value.voltage/10)+'V';
				//logs('typeof value.temperature = '+typeof value.temperature);
				//logs(value.temperature);
				value.temperature = isNullNaN(value.temperature)?'-':value.temperature+'C';
				value.humidity = isNullNaN(value.humidity)?'-':value.humidity+'%';
				
			});
			
			
			
			try{
				if(_infoWindow.m120.length>0){
					while((_infoWindow.m120.length>0)){
						var info = _infoWindow.m120.pop();
						info.close();	
					}
					_infoWindow.m120=[];
				}	
			}catch(e){}
			
			
			
			$('#pagingTbl').find('tr td#seq').filter(function(ind){
				$(this).parent().find('td').css('background-color', '');
			});
			
			_this.pagingTbl.tableAutoSync(data.data);
			
			$('#searchInfo').find('#dayDistanceStr').text(parseInt(data.dayDistanceStr)/10+"Km");
			
			markerSetting.paging.totalPage= data.totalPage.totalPage;
			makingPaging();
		});

	}

	function isNullNaN(str){
		
		if(str == null) return true;
		if(isNaN(str)) return true;
	         return false;
		}
	
	function gotoM110(){
		
		
		
		var r=0, dir=true;
	    var h=0;
	    var ch = parseInt($('.carlook_body').css("height"));
	    		
        dir = !dir;
        r = dir? 446 : 0;
        h = dir? (ch+446) : (ch + 446);
        $('.carlook').stop().animate({top: r+'px'}, 800);
        $('.carlook_body').stop().animate({height: h+'px'}, 800, function(){

    		$('#theForm').attr('action','/map/carListInMap','method','post');
    		$('#theForm').submit();	        	
        });

	}
	
	
	function regiDestinationPopup() {
		window.open('/map/getRegDestinationPopup', 'regDestination', 'width=920, height=600, scrollbars=yes, location=no');
	}

	// 목적지로 이동하기.
	function gotoDestini(tr){
		var lat = $(tr).find('#lat').val();
		var lng = $(tr).find('#lng').val();
		moveMapTo(lat, lng);
	}
/**
 * 화면 출력
 */
	function printScript(){
		window.print();
	}
	
</script>	

</body>
</html>
